<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header"><span>交互式算法</span></el-header>
      <el-main>
        <div class="cardContainer">
          <MainCard
            v-for="alg in algorithmList"
            :key="alg.path"
            :id="alg.path"
            class="mainCard"
            @click="jump($event)"
          >
            <template #image>
              <img :src="alg.imgUrl" class="image" />
            </template>
            <template #name> {{ alg.name }}</template>
          </MainCard>
        </div>
      </el-main>
    </el-container>
  </div>
</template>


<script setup>
import MainCard from "@/components/MainCard.vue";
import router from "@/router";
// 对象数组，每个对象对应一个算法，包含算法信息，用于渲染MainCard
const algorithmList = [
  {
    name: "数组",
    imgUrl:
      "https://www.runoob.com/wp-content/uploads/2014/09/c-array-2021-01-18-2.png",
    path: "/layout/array",
  },
  {
    name: "链表",
    imgUrl: "https://pic1.zhimg.com/v2-2fd862ddf8d4346bc3d3be9fdbb98f0d_r.jpg",
    path: "/layout/linkedlist",
  },
  {
    name: "排序",
    imgUrl:
      "https://static.fuxi.netease.com/fuxi-official/web/20221025/e26c80e6802342f9d3af791d11f52aa3.jpg",
    path: "/layout/sorting",
  },
];

// 跳转到路由
const jump = (e) => {
  // 获取被点击对象的id并请求数据;
  router.push(e.currentTarget.id);
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.header {
  height: 100px;
  text-align: center;
  font-size: 25px;
  padding: 40px;
}

.cardContainer {
  /* 实现页面一部分滚动条要在这部分加上固定宽高 */
  padding: 50px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  /* width: 1695px; */
  flex-wrap: wrap;
  overscroll-behavior: contain;
  height: 850px;
  background-color: grey;
}

.image {
  width: 390px;
  height: 230px;
  object-fit: cover;
}
</style>